
import React, { useState } from "react";
import {  Table } from 'antd';

const JxDetail = ({
    loading=true,
    list,
    current = 1,
    total = 0,
    defaultPageSize = 20,
    onChange = () => { }
}) => {
    const [filteredInfo, setFilteredInfo] = useState({});
    const [sortedInfo, setSortedInfo] = useState({});
    const handleChange = (pagination, filters, sorter) => {
        console.log('Various parameters', pagination, filters, sorter);
        setFilteredInfo(filters);
        setSortedInfo(sorter);
    };

    const columns = [
        {
            title: "序号",
            dataIndex: "rowno",
            key: "rowno",
            fixed: 'left',
            width: 80,
            sorter: (a, b) => a.rowno - b.rowno,
            sortOrder: sortedInfo.columnKey === 'rowno' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: "主机厂店代码",
            dataIndex: "insuredCode",
            fixed: 'left',

        },
        {
            title: '店名称',
            dataIndex: 'insuredName',
            fixed: 'left',

        },
        {
            title: '车险保费（万元）',
            dataIndex: 'carSumPremium',
            key: 'carSumPremium',
            sorter: (a, b) => a.carSumPremium - b.carSumPremium,
            sortOrder: sortedInfo.columnKey === 'carSumPremium' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '车险-新保保费（万元）',
            dataIndex: 'newCarSumPremium',
            key: 'newCarSumPremium',
            sorter: (a, b) => a.newCarSumPremium - b.newCarSumPremium,
            sortOrder: sortedInfo.columnKey === 'newCarSumPremium' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '车险-续保保费（万元）',
            dataIndex: 'renewalCarSumPremium',
            key: 'renewalCarSumPremium',
            sorter: (a, b) => a.renewalCarSumPremium - b.renewalCarSumPremium,
            sortOrder: sortedInfo.columnKey === 'renewalCarSumPremium' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '车险-转保保费（万元）',
            dataIndex: 'reinsurCarSumPremium',
            key: 'reinsurCarSumPremium',
            sorter: (a, b) => a.reinsurCarSumPremium - b.reinsurCarSumPremium,
            sortOrder: sortedInfo.columnKey === 'reinsurCarSumPremium' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '车险-目标保费（万元）',
            dataIndex: 'targetCarSumPremium',
            key: 'targetCarSumPremium',
            sorter: (a, b) => a.targetCarSumPremium - b.targetCarSumPremium,
            sortOrder: sortedInfo.columnKey === 'targetCarSumPremium' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '非车险保费（万元）',
            dataIndex: 'noCarSumPremium',
            key: 'noCarSumPremium',
            sorter: (a, b) => a.noCarSumPremium - b.noCarSumPremium,
            sortOrder: sortedInfo.columnKey === 'noCarSumPremium' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '非车险目标保费（万元）',
            dataIndex: 'targetNoCarSumPremium',
            key: 'targetNoCarSumPremium',
            sorter: (a, b) => a.targetNoCarSumPremium - b.targetNoCarSumPremium,
            sortOrder: sortedInfo.columnKey === 'targetNoCarSumPremium' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '商业险台数（台）',
            dataIndex: 'syCars',
            key: 'syCars',
            sorter: (a, b) => a.syCars - b.syCars,
            sortOrder: sortedInfo.columnKey === 'syCars' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '新保台数（商业险）',
            dataIndex: 'syNewCars',
            key: 'syNewCars',
            sorter: (a, b) => a.syNewCars - b.syNewCars,
            sortOrder: sortedInfo.columnKey === 'syNewCars' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '续保台数（商业险）',
            dataIndex: 'syRenewalCars',
            key: 'syRenewalCars',
            sorter: (a, b) => a.syRenewalCars - b.syRenewalCars,
            sortOrder: sortedInfo.columnKey === 'syRenewalCars' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '续保次新车台数（商业险）',
            dataIndex: 'syRenewalSecCars',
            key: 'syRenewalSecCars',
            sorter: (a, b) => a.syRenewalSecCars - b.syRenewalSecCars,
            sortOrder: sortedInfo.columnKey === 'syRenewalSecCars' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '续保旧车台数（商业险）',
            dataIndex: 'syRenewalOldCars',
            key: 'syRenewalOldCars',
            sorter: (a, b) => a.syRenewalOldCars - b.syRenewalOldCars,
            sortOrder: sortedInfo.columnKey === 'syRenewalOldCars' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '转保台数（商业险）',
            dataIndex: 'syReinsurCars',
            key: 'syReinsurCars',
            sorter: (a, b) => a.syReinsurCars - b.syReinsurCars,
            sortOrder: sortedInfo.columnKey === 'syReinsurCars' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '新车销量',
            dataIndex: 'newCars',
            key: 'newCars',
            sorter: (a, b) => a.newCars - b.newCars,
            sortOrder: sortedInfo.columnKey === 'newCars' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '目标台数',
            dataIndex: 'targetCars',
            key: 'targetCars',
            sorter: (a, b) => a.targetCars - b.targetCars,
            sortOrder: sortedInfo.columnKey === 'targetCars' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '新车份额',
            dataIndex: 'newCarShare',
            key: 'newCarShare',
            sorter: (a, b) => a.newCarShare - b.newCarShare,
            sortOrder: sortedInfo.columnKey === 'newCarShare' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '目标份额',
            dataIndex: 'targetCarShare',
            key: 'targetCarShare',
            sorter: (a, b) => a.targetCarShare - b.targetCarShare,
            sortOrder: sortedInfo.columnKey === 'targetCarShare' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '续保率（商业险）',
            dataIndex: 'syRenewalRate',
            key: 'syRenewalRate',
            sorter: (a, b) => a.syRenewalRate - b.syRenewalRate,
            sortOrder: sortedInfo.columnKey === 'syRenewalRate' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '次新车续保率（商业险）',
            dataIndex: 'syRenewalSecRate',
            key: 'syRenewalSecRate',
            sorter: (a, b) => a.syRenewalSecRate - b.syRenewalSecRate,
            sortOrder: sortedInfo.columnKey === 'syRenewalSecRate' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '旧车续保率（商业险）',
            dataIndex: 'syRenewalOldRate',
            key: 'syRenewalOldRate',
            sorter: (a, b) => a.syRenewalOldRate - b.syRenewalOldRate,
            sortOrder: sortedInfo.columnKey === 'syRenewalOldRate' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '续转保率（商业险）',
            dataIndex: 'syReRate',
            key: 'syReRate',
            sorter: (a, b) => a.syReRate - b.syReRate,
            sortOrder: sortedInfo.columnKey === 'syReRate' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '单均保费',
            dataIndex: 'averPremium',
            key: 'averPremium',
            sorter: (a, b) => a.averPremium - b.averPremium,
            sortOrder: sortedInfo.columnKey === 'averPremium' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '新保单均保费',
            dataIndex: 'newAverPremium',
            key: 'newAverPremium',
            sorter: (a, b) => a.newAverPremium - b.newAverPremium,
            sortOrder: sortedInfo.columnKey === 'newAverPremium' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '续保单均保费',
            dataIndex: 'renewalAverPremium',
            key: 'renewalAverPremium',
            sorter: (a, b) => a.renewalAverPremium - b.renewalAverPremium,
            sortOrder: sortedInfo.columnKey === 'renewalAverPremium' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '转保单均保费',
            dataIndex: 'reinsurAverPremium',
            key: 'reinsurAverPremium',
            sorter: (a, b) => a.reinsurAverPremium - b.reinsurAverPremium,
            sortOrder: sortedInfo.columnKey === 'reinsurAverPremium' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '单均保费（车险）',
            dataIndex: 'carAverPremium',
            key: 'carAverPremium',
            sorter: (a, b) => a.carAverPremium - b.carAverPremium,
            sortOrder: sortedInfo.columnKey === 'carAverPremium' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '非车单均保费',
            dataIndex: 'noCarAverPremium',
            key: 'noCarAverPremium',
            sorter: (a, b) => a.noCarAverPremium - b.noCarAverPremium,
            sortOrder: sortedInfo.columnKey === 'noCarAverPremium' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '自主定价系数',
            dataIndex: 'priceRate',
            key: 'priceRate',
            sorter: (a, b) => a.priceRate - b.priceRate,
            sortOrder: sortedInfo.columnKey === 'priceRate' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '新保自主定价系数',
            dataIndex: 'newPriceRate',
            key: 'newPriceRate',
            sorter: (a, b) => a.newPriceRate - b.newPriceRate,
            sortOrder: sortedInfo.columnKey === 'newPriceRate' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '续保自主定价系数',
            dataIndex: 'renewalPriceRate',
            key: 'renewalPriceRate',
            sorter: (a, b) => a.renewalPriceRate - b.renewalPriceRate,
            sortOrder: sortedInfo.columnKey === 'renewalPriceRate' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '转保自主定价系数',
            dataIndex: 'reinsurPriceRate',
            key: 'reinsurPriceRate',
            sorter: (a, b) => a.reinsurPriceRate - b.reinsurPriceRate,
            sortOrder: sortedInfo.columnKey === 'reinsurPriceRate' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '商业险费用率',
            dataIndex: 'syFeeRate',
            key: 'syFeeRate',
            sorter: (a, b) => a.syFeeRate - b.syFeeRate,
            sortOrder: sortedInfo.columnKey === 'syFeeRate' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '新保费用率（商业险）',
            dataIndex: 'syNewFeeRate',
            key: 'syNewFeeRate',
            sorter: (a, b) => a.syNewFeeRate - b.syNewFeeRate,
            sortOrder: sortedInfo.columnKey === 'syNewFeeRate' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '续保费用率（商业险）',
            dataIndex: 'syRenewalFeeRate',
            key: 'syRenewalFeeRate',
            sorter: (a, b) => a.syRenewalFeeRate - b.syRenewalFeeRate,
            sortOrder: sortedInfo.columnKey === 'syRenewalFeeRate' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '转保费用率（商业险）',
            dataIndex: 'syReinsurFeeRate',
            key: 'syReinsurFeeRate',
            sorter: (a, b) => a.syReinsurFeeRate - b.syReinsurFeeRate,
            sortOrder: sortedInfo.columnKey === 'syReinsurFeeRate' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '交强险费用率',
            dataIndex: 'jqFeeRate',
            key: 'jqFeeRate',
            sorter: (a, b) => a.jqFeeRate - b.jqFeeRate,
            sortOrder: sortedInfo.columnKey === 'jqFeeRate' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '新保费用率（交强险）',
            dataIndex: 'jqNewFeeRate',
            key: 'jqNewFeeRate',
            sorter: (a, b) => a.jqNewFeeRate - b.jqNewFeeRate,
            sortOrder: sortedInfo.columnKey === 'jqNewFeeRate' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '续保费用率（交强险）',
            dataIndex: 'jqRenewalFeeRate',
            key: 'jqRenewalFeeRate',
            sorter: (a, b) => a.jqRenewalFeeRate - b.jqRenewalFeeRate,
            sortOrder: sortedInfo.columnKey === 'jqRenewalFeeRate' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '转保费用率（交强险）',
            dataIndex: 'jqReinsurFeeRate',
            key: 'jqReinsurFeeRate',
            sorter: (a, b) => a.jqReinsurFeeRate - b.jqReinsurFeeRate,
            sortOrder: sortedInfo.columnKey === 'jqReinsurFeeRate' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '满期赔付率（当年保单）',
            dataIndex: 'claimRatio',
            key: 'claimRatio',
            sorter: (a, b) => a.claimRatio - b.claimRatio,
            sortOrder: sortedInfo.columnKey === 'claimRatio' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '满期赔付率（上年保单）',
            dataIndex: 'lastClaimRatio',
            key: 'lastClaimRatio',
            sorter: (a, b) => a.lastClaimRatio - b.lastClaimRatio,
            sortOrder: sortedInfo.columnKey === 'lastClaimRatio' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '满期赔付率（当年保单—车损险）',
            dataIndex: 'csClaimRatio',
            key: 'csClaimRatio',
            sorter: (a, b) => a.csClaimRatio - b.csClaimRatio,
            sortOrder: sortedInfo.columnKey === 'csClaimRatio' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '满期赔付率（上年保单—车损险）',
            dataIndex: 'lastCsClaimRatio',
            key: 'lastCsClaimRatio',
            sorter: (a, b) => a.lastCsClaimRatio - b.lastCsClaimRatio,
            sortOrder: sortedInfo.columnKey === 'lastCsClaimRatio' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '历年制赔付率（滚动一年）',
            dataIndex: 'dnlnClaimRatio',
            key: 'dnlnClaimRatio',
            sorter: (a, b) => a.dnlnClaimRatio - b.dnlnClaimRatio,
            sortOrder: sortedInfo.columnKey === 'dnlnClaimRatio' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '标的核损台数(商业险)',
            dataIndex: 'sumVerilossCot',
            key: 'sumVerilossCot',
            sorter: (a, b) => a.sumVerilossCot - b.sumVerilossCot,
            sortOrder: sortedInfo.columnKey === 'sumVerilossCot' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: ' 标的核损金额(商业险)',
            dataIndex: 'sumVerilossFee',
            key: 'sumVerilossFee',
            sorter: (a, b) => a.sumVerilossFee - b.sumVerilossFee,
            sortOrder: sortedInfo.columnKey === 'sumVerilossFee' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '标的返修台数(商业险)',
            dataIndex: 'repairCot',
            key: 'repairCot',
            sorter: (a, b) => a.repairCot - b.repairCot,
            sortOrder: sortedInfo.columnKey === 'repairCot' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '标的返修金额（商业险）',
            dataIndex: 'repairFee',
            key: 'repairFee',
            sorter: (a, b) => a.repairFee - b.repairFee,
            sortOrder: sortedInfo.columnKey === 'repairFee' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '标的返修率（按台数）商业险',
            dataIndex: 'repairCotRatio',
            key: 'repairCotRatio',
            sorter: (a, b) => a.repairCotRatio - b.repairCotRatio,
            sortOrder: sortedInfo.columnKey === 'repairCotRatio' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '标的返修率（按金额）商业险',
            dataIndex: 'repairFeeRatio',
            key: 'repairFeeRatio',
            sorter: (a, b) => a.repairFeeRatio - b.repairFeeRatio,
            sortOrder: sortedInfo.columnKey === 'repairFeeRatio' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '标的车损险赔款台数',
            dataIndex: 'sumVeriPayCot',
            key: 'sumVeriPayCot',
            sorter: (a, b) => a.sumVeriPayCot - b.sumVeriPayCot,
            sortOrder: sortedInfo.columnKey === 'sumVeriPayCot' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '标的车损险赔款金额',
            dataIndex: 'sumVeriPayFee',
            key: 'sumVeriPayFee',
            sorter: (a, b) => a.sumVeriPayFee - b.sumVeriPayFee,
            sortOrder: sortedInfo.columnKey === 'sumVeriPayFee' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '标的返修工时金额（商业险）',
            dataIndex: 'repairWhFee',
            key: 'repairWhFee',
            sorter: (a, b) => a.repairWhFee - b.repairWhFee,
            sortOrder: sortedInfo.columnKey === 'repairWhFee' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '标的返修配件金额（商业险）',
            dataIndex: 'repairSpFee',
            key: 'repairSpFee',
            sorter: (a, b) => a.repairSpFee - b.repairSpFee,
            sortOrder: sortedInfo.columnKey === 'repairSpFee' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '标的返修配件金额（商业险）',
            dataIndex: 'repairSpFee',
            key: 'repairSpFee',
            sorter: (a, b) => a.repairSpFee - b.repairSpFee,
            sortOrder: sortedInfo.columnKey === 'repairSpFee' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '推修工时金额（商业险）',
            dataIndex: 'pushWhFee',
            key: 'pushWhFee',
            sorter: (a, b) => a.pushWhFee - b.pushWhFee,
            sortOrder: sortedInfo.columnKey === 'pushWhFee' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '推修配件金额（商业险）',
            dataIndex: 'pushSpFee',
            key: 'pushSpFee',
            sorter: (a, b) => a.pushSpFee - b.pushSpFee,
            sortOrder: sortedInfo.columnKey === 'pushSpFee' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '三者车物/物损金额',
            dataIndex: 'szCarPropSumPaid',
            key: 'szCarPropSumPaid',
            sorter: (a, b) => a.szCarPropSumPaid - b.szCarPropSumPaid,
            sortOrder: sortedInfo.columnKey === 'szCarPropSumPaid' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '三者人伤金额',
            dataIndex: 'szPersonSumPaid',
            key: 'szPersonSumPaid',
            sorter: (a, b) => a.szPersonSumPaid - b.szPersonSumPaid,
            sortOrder: sortedInfo.columnKey === 'szPersonSumPaid' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '其他赔款',
            dataIndex: 'otherSumPaid',
            key: 'otherSumPaid',
            sorter: (a, b) => a.otherSumPaid - b.otherSumPaid,
            sortOrder: sortedInfo.columnKey === 'otherSumPaid' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '有效立案数量',
            dataIndex: 'validCaseCnt',
            key: 'validCaseCnt',
            sorter: (a, b) => a.validCaseCnt - b.validCaseCnt,
            sortOrder: sortedInfo.columnKey === 'validCaseCnt' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '无效案件/销案数量',
            dataIndex: 'invalidCaseCnt',
            key: 'invalidCaseCnt',
            sorter: (a, b) => a.invalidCaseCnt - b.invalidCaseCnt,
            sortOrder: sortedInfo.columnKey === 'invalidCaseCnt' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '标的车损（赔款比例）',
            dataIndex: 'carLossFeeRatio',
            key: 'carLossFeeRatio',
            sorter: (a, b) => a.carLossFeeRatio - b.carLossFeeRatio,
            sortOrder: sortedInfo.columnKey === 'carLossFeeRatio' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '三者车物（赔款比例）',
            dataIndex: 'szLossFeeRatio',
            key: 'szLossFeeRatio',
            sorter: (a, b) => a.szLossFeeRatio - b.szLossFeeRatio,
            sortOrder: sortedInfo.columnKey === 'szLossFeeRatio' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '三者人伤（赔款比例）',
            dataIndex: 'szPersonFeeRatio',
            key: 'szPersonFeeRatio',
            sorter: (a, b) => a.szPersonFeeRatio - b.szPersonFeeRatio,
            sortOrder: sortedInfo.columnKey === 'szPersonFeeRatio' ? sortedInfo.order : null,
            ellipsis: true,
        },
        {
            title: '其他赔款（赔款比例）',
            dataIndex: 'otherFeeRatio',
            key: 'otherFeeRatio',
            sorter: (a, b) => a.otherFeeRatio - b.otherFeeRatio,
            sortOrder: sortedInfo.columnKey === 'otherFeeRatio' ? sortedInfo.order : null,
            ellipsis: true,
        },








    ];
    return (
        <>
            <Table
                size="small"
                loading={loading}
                columns={columns}
                dataSource={list}
                onChange={handleChange}
                scroll={{
                    x: 11500,
                    y: 700,
                }}
                showSorterTooltip={false}
                pagination={{
                    total: total,
                    current: current,
                    defaultPageSize: defaultPageSize,
                    onChange:(value,valuw2)=>{
                        console.log("分页组件：",value,valuw2)
                        onChange(value);
                    }
                }}

            />
        </>
    )
}
export default JxDetail;